<style>
    .nav{
        width: 100%;
        min-height: 50px;
        padding: 1% 1% 1% 5%;
        color: white;
        overflow: hidden;
        background-color: #212121;
    }
    .nav_left{
        width: 80%;
        font-size: 3.0rem;
        float: left;
    }
    .nav_left a{
        text-decoration: none;
    }
    .nav_right{
        width: 20%;
        float: right;
        text-align: center;
        font-size: 1.5rem;
    }
    .nav_right a{
        color: #4eb0f6;
        text-decoration:none;
    }
    .nav_right a:hover{
        color: #94ae7c;
        text-decoration: none;
    }
    @media screen and (max-width: 500px){
        .nav_left{
            width: 60%;
        }
        .nav_right{
            width: 40%;
            padding-right:0;
        }
    }
</style>
<nav class="nav">
    <div class="nav_left">
        <a href="/" style="color: #f9f9f9">
            <img src="/images/pet_icon.png" alt="">
            爱宠驿站
        </a>

    </div>
    <div class="nav_right">
        <%
        if(username==undefined){
        %>

        <a href="/login">
            <img src="/images/person.png" alt="">
            登录
        </a>

        <%
        }else{
        %>

        <a href="/users">
            <img src="/images/person.png" alt="">
            <%=username%>
        </a>
        <%
        }
        %>
    </div>
</nav>
<script src="/js/jquery-1.8.3.js"></script>
<script src="/javascripts/homepage.js"></script>